@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3637306_niy9pd2jhv.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        nav{
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-top: getvw(20);
            .product{
                width: getvw(123);
                height: getvw(57);
                background-color:white ;
                border-radius: 10px;
                border: 1px solid #ff9344;
                font-size: getvw(30);
            }
            p{
                font-size: getvw(30);
            }
            i{
                color: #ff9344;
                font-size: getvw(40);
            }
        }
        .picture{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            padding-top: getvw(20);
            img{
                width: getvw(170);
                height: getvw(170);
            }
            .writing{
                p{
                    font-size: getvw(40);
                    font-weight: bold;
                }
                p:nth-of-type(2){
                    font-size: getvw(20);
                    font-weight: lighter;
                    padding-top: getvw(20);
                }
            }
            i{
                font-size: getvw(80);
            }
        }
        .list{
            display: flex;
            justify-content: space-evenly;
            margin-top: getvw(20);
            .comment{
                width: getvw(195);
                height: getvw(150);
                background-color: #b2e0a0;
                text-align: center;
                padding-top: getvw(30);
                box-sizing: border-box;
                &:nth-child(2){
                    background-color: #a0dce0;
                &:nth-child(3){
                    background-color: #e0b7a0;
                }
                }
                i{
                    font-size: getvw(60);
                    color: #ffff;
                }
                p{
                    padding-top: getvw(20);
                    font-size: getvw(30);
                }
            }
        }
    }
    main{
        .mset{
            .wallet{
                display: flex;
                justify-content: space-between;
                padding-top: getvw(40);
                padding-left: getvw(30);
                padding-right: getvw(30);
                p{
                    font-size: getvw(40);
                    font-weight: bold;
                    i{
                        font-size: getvw(50);
                        color: #ff9344;
                    }
                }
            }
        }
        .button_box{
            display: flex;
            justify-content: space-evenly;
            margin-top: getvw(30);
            button{
                width: getvw(150);
                height: getvw(75);
                border-radius: 20px;
                background-color: #ff9344;
                color: #ffff;
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        .nav{
            ul{
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                li{
                    i{
                        color: #ff9344;
                        font-size: getvw(50);
                    }
                    
                    p{
                        color: #000;
                        font-size: getvw(30);
                    }
                }
            }
        }
    }
}